import React, { memo, useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import style from "./index.module.scss";
import { ProductCard } from "react-vant";
import { DeleteOutline } from "antd-mobile-icons";
import { medicineInterface } from "@/Type/git.js";
import { NavBar } from "react-vant";
import axios from "@/utils/axios";
const Index: React.FC =memo (() => {
  const { state } = useLocation();
  const [data, setdata] = useState([]);
  const [flag, setflag] = useState(false);
  const [his, sethis] = useState<string[]>(
    JSON.parse(localStorage.getItem("history") || "[]")
  );
  // console.log(state);
  const jump = useNavigate();
  useEffect(() => {
    if (!state?.list) {
      const s = async () => {
        await serchfun();
      };
      s();
    }
  }, []);

  async function serchfun(name: string) {
    const ind = his.lastIndexOf(name);
    console.log(ind, "ind");
    if (ind > -1) {
      his.splice(ind, 1);
      sethis(his);
    }
    console.log(name, "name");
    if (name) {
      his.unshift(name);
      localStorage.setItem("history", JSON.stringify(his));
    }
    const {
      data: { data },
    } = await axios.get("/serch", { params: { name } });
    // console.log(data, "data");
    setdata(data);
    setflag(false);
  }
  function clearHistorty() {
    localStorage.removeItem("history");
    sethis([]);
  }

  return (
    <div className={style.box}>
      <NavBar leftText="返回" className={style.rvnavbar__content} onClickLeft={() => jump(-1)} />
      <div className={style.serchinput}>
        <input
          type="text"
          placeholder="请输入药品名称"
          onKeyDown={(e) => {
            if (e.code === "Enter") {
              serchfun((e.target as HTMLInputElement).value);
              setflag(false);
            }
          }}
          onClick={() => {
            setdata([]);
            if (state?.list) {
              state.list = [];
            }
            setflag(true);
          }}
        />
        {flag && his.length != 0 && (
          <div className={style.serchbtn}>
            <div>
              <h3>历史搜索</h3>
              <p className={style.del} onClick={clearHistorty}>
                <DeleteOutline />
              </p>
              {his.map((item: string, index: number) => {
                return (
                  <span
                    onClick={(e) => {
                      console.log(e);
                      serchfun((e.target as HTMLSpanElement).innerText);
                    }}
                    key={index}
                  >
                    {item}
                  </span>
                );
              })}
            </div>
          </div>
        )}
      </div>

      <div className={style.main}>
        {state &&
          state.list.map((item: medicineInterface) => (
            <ProductCard
              onClick={() => {
                jump("/jkshop/detail:item", { state: { item } });
              }}
              key={item.id}
              price={<p className={style.price}>￥{item.price}</p>}
              desc={item.title}
              title={<p className={style.title}>{item.specification.name}</p>}
              thumb={item.img}
            />
          ))}
        <div className={style.main}>
          {data &&
            data.map((item: medicineInterface) => (
              <ProductCard
                onClick={() => {
                  jump("/jkshop/detail:item", { state: { item } });
                }}
                key={item.id}
                price={<p className={style.price}>￥{item.price}</p>}
                desc={item.title}
                title={<p className={style.title}>{item.name}</p>}
                thumb={item.img}
              />
            ))}
        </div>
      </div>
    </div>
  );
})

export default Index;
